@import 'mixins';
@import 'vars';

:host {
    display: inline-flex
}

:host ::ng-deep {
    svg {
        fill: $color-white;
    }
}

.svg-icon {
    display: flex;
}

.icon {
    color: $color-white;
}

.sm {
    .icon {
        font-size: 18px;
    }

    ::ng-deep {
        .svg-icon svg, .svg-icon {
            width: 18px;
        }
    }
}

.md {
    .icon {
        font-size: 20px;
    }

    ::ng-deep {
        .svg-icon svg, .svg-icon {
            width: 20px;
        }
    }
}

.lg {
    .icon {
        font-size: 30px;
    }

    ::ng-deep {
        .svg-icon svg, .svg-icon {
            width: 30px;
        }
    }
}